<!DOCTYPE html>
<html>
<head>
  <title>扫雷游戏</title>
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(10, 30px);
    }

    .cell {
      width: 30px;
      height: 30px;
      border: 1px solid black;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>扫雷游戏</h1>
  <div class="grid"></div>

  <script>
    const GRID_SIZE = 10;
    const NUM_MINES = 10;

    let grid = [];
    let mines = [];

    function generateMines() {
      for (let i = 0; i < NUM_MINES; i++) {
        let row, col;
        do {
          row = Math.floor(Math.random() * GRID_SIZE);
          col = Math.floor(Math.random() * GRID_SIZE);
        } while (mines.includes(`${row}-${col}`));
        mines.push(`${row}-${col}`);
      }
    }

    function buildGrid() {
      const container = document.querySelector('.grid');
      for (let row = 0; row < GRID_SIZE; row++) {
        for (let col = 0; col < GRID_SIZE; col++) {
          const cell = document.createElement('div');
          cell.className = 'cell';
          cell.dataset.row = row;
          cell.dataset.col = col;
          cell.addEventListener('click', handleCellClick);
          container.appendChild(cell);
          grid.push(cell);
        }
      }
    }

    function handleCellClick() {
      const row = parseInt(this.dataset.row);
      const col = parseInt(this.dataset.col);
      const cell = grid.find(c => parseInt(c.dataset.row) === row && parseInt(c.dataset.col) === col);
      
      if (mines.includes(`${row}-${col}`)) {
        cell.innerHTML = 'X';
        alert('游戏结束！');
      } else {
        let minesCount = 0;
        for (let i = -1; i <= 1; i++) {
          for (let j = -1; j <= 1; j++) {
            if (i === 0 && j === 0) continue;
            const adjacentRow = row + i;
            const adjacentCol = col + j;
            if (adjacentRow >= 0 && adjacentRow < GRID_SIZE && adjacentCol >= 0 && adjacentCol < GRID_SIZE) {
              if (mines.includes(`${adjacentRow}-${adjacentCol}`)) {
                minesCount++;
              }
            }
          }
        }
        cell.innerHTML = minesCount;
      }
      
      cell.removeEventListener('click', handleCellClick);
    }

    generateMines();
    buildGrid();
  </script>
</body>
</html>
